<template>
    <view class="lightColour navTop">
        <van-nav-bar title="我的社区" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>
        <div class="line"></div>
        <van-cell value="qunlinke123（13216478888）" custom-class="tjr">
            <view slot="title">
                <img src="@/static/icon/tj.png" alt="">
                <view class="van-cell-text">我的推荐人</view>
            </view>
        </van-cell>
        <div class="line"></div>
        <van-cell-group>
            <van-cell custom-class="sqtit">
                <view slot="title">
                    <view class="van-cell-text"><img src="@/static/icon/td.png" alt="">社区列表 （275）</view>
                </view>
                <view slot="right-icon">
                    <view class="van-cell-value" @tap="show=true">
                        <span>{{value}}</span>
                        <van-icon name="arrow-down"/>
                    </view>
                </view>
            </van-cell>
            <van-cell custom-class="title" title="用户名" value="等级" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
            <van-cell custom-class="medium" title="sfsdfln(27)" value="一级经销商" />
        </van-cell-group>

        <van-popup :show="show" position="bottom" @close="show=false">
			<van-picker show-toolbar :columns="columns" @cancel="show=false"  @confirm="onConfirm" />
		</van-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show:false,
            columns:['全部等级', '一级经销商', '温州', '嘉兴', '湖州'],
            value : '全部等级',
        };
    },
    methods: {
        onClickLeft() {
            uni.navigateBack();
        },
        onConfirm(event){
            const { picker, value, index } = event.detail;
            this.value = value
            this.show = false
            console.log(this.value)
        }
    }
};
</script>

<style lang="less">
.tjr{
    .van-cell-text{font-weight: bold;color: #000000;font-size: 28upx}
    img{width: 32upx;height: 32upx;float: left;vertical-align:text-top;margin-right: 10upx;margin-top: 5upx;}
}

.sqtit{
    .van-cell-text{font-weight: bold;color: #000000;font-size: 28upx;
        img{width: 32upx;height: 32upx;float: left;vertical-align:text-top;margin-right: 10upx;margin-top: 5upx;}
    }
    .van-cell-value{float: right;
        background: url('~@/static/icon/leve.png');
        background-size: 100% 100%;
        width: 148upx;
        height: 36upx;
        line-height: 36upx;
        margin-top: 10upx;
        span{
            width: 115upx;
            text-align: center;
            font-size: 20upx;
            color: #37A6FF;
            display: inline-block;
            vertical-align: middle
        }
        .van-icon{
            color: #fff;
            vertical-align: middle
        }
    }
}
.title{font-size: 28upx;color: #000;
    .van-cell__value{color: #000;}
}
.medium{color: #616161 !important;font-size: 26upx !important}
</style>
